<template>
  <div>
    <div class="mar-b-20">
      <el-date-picker
        v-model="dateTimeMonth"
        type="month"
        value-format="yyyy-MM"
        placeholder="选择月" @change="dateTimeMonthChange">
      </el-date-picker>
      <el-button type="primary" @click="doExport" class="mar-l-20">导出报表</el-button>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中">
        <el-table-column label="日期">
          <template slot-scope="scope">
            <template>{{ scope.row.createTime | dateFilterType() }}</template>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="balance" >
          <template slot-scope="scope">
            <template>{{ scope.row.createTime | dateFilterType('hh:mm:ss') }}</template>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="remark">
          <template slot-scope="scope">
            {{ incomeExpenseTypes[scope.row.incomeExpenseType] }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ scope.row.incomeExpenseType | stringSubstring(scope.row.incomeExpenseType) }}
            <span></span>
          </template>
        </el-table-column>
        <el-table-column label="结算金额（元）" prop="amount"></el-table-column>
        <el-table-column label="关联订单号" prop="orderNo">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="doLinkDetail(scope.row)">{{ scope.row.orderNo }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="关联微客/门店" prop="nickname"></el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background 
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchListQuery.currentPage"
        :page-sizes="[10, 20, 50, 100]" 
        :page-size="searchListQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import { exportEnterpriseIncomeExpense } from '@/api/finace/finaceAccountStatement'
  import { pagingIncome } from '@/api/user/enterpriseIncome.js'
  import { formatTimeToDate, formatTimeToDateByType } from '@/api/common/date'

  export default {
    data() {
      return {
        dateTimeMonth: '',
        searchListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: ''
        },
        dataList: [],
        listLoading: false,
        total: 0
      }
    },
    filters: {
      stringSubstring(e) {
        const type = e.toString().substring(0, 1)
        if (type === '1') return '收入'
        if (type === '2') return '支出'
      },
      dateFilter(e) {
        if (e != null) {
          const date = formatTimeToDate(e)
          return date
        }
        return e
      },
      dateFilterType(e, type) {
        if (e != null) {
          const date = formatTimeToDateByType(e, type)
          return date
        }
        return e
      }
    },
    created() {
      this.dateTimeMonth = formatTimeToDateByType(new Date(), 'month').toString()
      this.initList()
    },
    methods: {
      // 初始化
      initList() {
        this.listLoading = true
        this.searchListQuery.dateTime = this.dateTimeMonth
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        pagingIncome(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.dataList = response.data.records
          this.total = response.data.total
          this.incomeExpenseTypes = response.data.dict.incomeExpenseType
        })
      },
      // 月份选择事件
      dateTimeMonthChange() {
        this.initList()
      },
      // 导出事件
      doExport() {
        const form = {
          enterpriseId: this.getEnterpriseId(),
          dateTime: this.dateTimeMonth
        }
        window.open(exportEnterpriseIncomeExpense(form), '_blank')
      },
      // 跳转订单详情
      doLinkDetail(row) {
        const routeData = this.$router.resolve({
          path: '/order/order/detail/index',
          query: { orderId: row.orderId }
        })
        window.open(routeData.href, '_blank')
      },
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      },
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      }
    }
  }
</script>
